<template>
    <div>
        <div class="aside-search">
            <el-input size="medium" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
        </div>
        <el-menu
                :default-active="activeLeftMenu"
                class="el-menu-left"
                :router="true"
                :unique-opened="true"
                active-text-color="#1E83F0">
            <el-menu-item v-for="(leftMenu,index) in leftMenus" :key="index" :index="leftMenu.path">
                <i :class="'fa fa-'+leftMenu.meta.icon"></i>
                <span slot="title">{{leftMenu.meta.title}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex';
    export default {
        data(){
            return {
                leftMenus : [],
            }
        },
        created(){
            this.filterRouters(this.routers);
        },
        computed: {
            ...mapGetters(['routers','activeLeftMenu','activeTopMenu'])
        },
        methods:{
            //显示左侧路由菜单
            filterRouters(val){
                this.$nextTick(()=>{
                    val.filter((item)=>{
                        if(item.children && item.children.length){
                            item.children.filter((i)=>{
                                if(i.path == this.activeTopMenu){
                                    this.leftMenus = i.children;
                                }
                            })
                        }
                    })
                })
            }
        },
    }
</script>